<template>
  <div class="title">
    <div class="titleText">{{ pageTitle }}</div>
    <slot name="buttonFirst"></slot>
    <div style="flex: 1">
      <el-button
        v-for="(item, index) in buttonData"
        :key="index"
        link
        :icon="item.icon"
        :loading="item.loading"
        @click="item.event(item)"
        :style="{ color: item.color ? item.color : '#333333' }"
      >
        {{ item.title }}
      </el-button>
    </div>
    <slot name="buttonLast"></slot>
  </div>
</template>
<script setup lang="ts">
defineProps({
  pageTitle: {
    type: String,
  },
  buttonData: {
    type: [Array, Object],
  },
})
</script>

<style lang="scss" scoped>
.title {
  border-radius: 5px;
  background-color: white;
  height: 48px;
  margin-bottom: 10px;
  padding: 0px 10px;
  display: flex;
  align-items: center;
  .titleText {
    height: 48px;
    line-height: 48px;
    font-size: $titlebar-font-size;
    color: #333;
    font-weight: unset;
    margin-right: 10px;
  }
  .el-button--text {
    font-size: $titlebar-button-font-size;
    color: $titlebar-button-color;
  }
}
</style>
